<template>
  <div class="personal-center-container">
    <el-row :gutter="20">
      <el-col :lg="12" :md="12" :sm="12" :xl="12" :xs="12">
        <el-card shadow="hover" skeleton>
          <div class="card-header" slot="header">
            <div>
              <vab-icon icon="line-chart-line" />
              本月生产计划
            </div>
          </div>
          <vab-chart
            :init-options="initOptions"
            :option="option"
            theme="vab-echarts-theme"
          />
        </el-card>
      </el-col>
      <el-col
        v-for="(item, index) in iconList"
        :key="index"
        :lg="6"
        :md="6"
        :sm="6"
        :xl="6"
        :xs="6"
      >
        <el-card class="icon-panel" shadow="hover">
          <div
            style="
              display: flex;
              flex-direction: column;
              align-items: center;
              justify-content: center;
              height: 255px;
            "
            @click="DeviceStateTypeData(index)"
          >
            <el-badge :value="item.value">
              <vab-icon
                :icon="item.icon"
                :style="{ color: item.color, fontSize: '40px' }"
              />
            </el-badge>
            <p>{{ item.title }}</p>
          </div>
        </el-card>
      </el-col>
      <el-col :lg="24" :md="24" :sm="24" :xl="24" :xs="24">
        <el-card shadow="hover" skeleton>
          <div class="card-header" slot="header">
            <div>
              <vab-icon icon="line-chart-line" />
              信息
            </div>
            <el-button
              style="float: right; margin-top: -20px"
              type="primary"
              @click="chadan"
            >
              紧急插单
            </el-button>
          </div>
          <el-table :data="list" style="width: 100%">
            <!-- <el-table-column label="编号" prop="Id" /> -->
            <el-table-column label="工单编号" prop="OrderId" />
            <el-table-column label="工单状态" prop="OrderState" />
            <el-table-column label="产品编号" prop="ProductId" />
            <el-table-column label="产品名称" prop="ProductName" />
            <el-table-column label="数量" prop="Num" />
            <el-table-column label="完成数量" prop="FinishNum" />
            <el-table-column label="完成率" prop="FinishRate" />
            <el-table-column label="操作">
              <template v-if="true" slot-scope="scope">
                <el-button
                  size="small"
                  @click="getWorkorderProduceQueue(scope.row)"
                >
                  详情
                </el-button>
                <el-button size="small" @click="zanting(scope.row, 0)">
                  {{ scope.row.OrderState != '已暂停' ? '暂停' : '恢复' }}
                </el-button>
                <el-button size="small" @click="cancel(scope.row)">
                  取消
                </el-button>
                <!-- <el-button size="small" @click="zanting(scope.row, 1)">
                  继续
                </el-button> -->
                <!-- <el-button size="small" @click="quxiao(scope.row)">
                  取消
                </el-button> -->
              </template>
            </el-table-column>
            <template slot="empty">
              <el-empty class="vab-data-empty" description="暂无数据" />
            </template>
          </el-table>
          <el-pagination
            background
            :current-page="queryForm.pageNo"
            :layout="layout"
            :page-size="queryForm.pageSize"
            :total="total"
            @current-change="handleCurrentChange"
            @size-change="handleSizeChange"
          />
        </el-card>
      </el-col>
    </el-row>

    <el-dialog
      :close-on-click-modal="false"
      :visible="dialogVisible"
      :title="title"
      width="60%"
      :before-close="handleClose"
    >
      <div>
        <template v-if="type == 1">
          <div>
            <el-descriptions direction="vertical" :column="2" border>
              <el-descriptions-item>
                <template slot="label">
                  <i class="el-icon-user"></i>
                  所属订单
                </template>
                {{ detail.ProductOrderId }}
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">
                  <vab-icon icon="time-line" />
                  产品名称
                </template>
                <el-button type="error">{{ detail.ProductName }}</el-button>
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">
                  <i class="el-icon-user"></i>
                  零件数量
                </template>
                {{ detail.Num }}
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">
                  <i class="el-icon-user"></i>
                  完成数量
                </template>
                <el-tag size="small">{{ detail.FinishNum }}</el-tag>
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">
                  <i class="el-icon-user"></i>
                  加工进度
                </template>
                <el-progress
                  :percentage="parseInt(detail.FinishRate)"
                ></el-progress>
              </el-descriptions-item>
              <el-descriptions-item></el-descriptions-item>
            </el-descriptions>
            <el-row :gutter="20" style="margin-top: 30px">
              <el-col :span="12">
                <template v-if="detail.PartQueue.length != 0">
                  <template v-for="item in detail.PartQueue">
                    <el-descriptions
                      class="margin-top"
                      title=""
                      :column="2"
                      size="mini"
                      border
                    >
                      <el-descriptions-item>
                        <template slot="label">
                          <i class="el-icon-user"></i>
                          零件编号
                        </template>
                        {{ item.PartId }}
                      </el-descriptions-item>
                      <el-descriptions-item>
                        <template slot="label">
                          <i class="el-icon-mobile-phone"></i>
                          总工序
                        </template>
                        {{ item.TotalOp }}
                      </el-descriptions-item>
                      <el-descriptions-item>
                        <template slot="label">
                          <i class="el-icon-location-outline"></i>
                          当前工序
                        </template>
                        {{ item.CurrentOp }}
                      </el-descriptions-item>
                      <el-descriptions-item>
                        <template slot="label">
                          <i class="el-icon-tickets"></i>
                          当前位置
                        </template>
                        {{ item.CurDevice }}
                      </el-descriptions-item>
                      <el-descriptions-item>
                        <template slot="label">
                          <i class="el-icon-office-building"></i>
                          加工日志
                        </template>
                        {{ item.ProcessLog }}
                      </el-descriptions-item>
                      <el-descriptions-item>
                        <template slot="label">
                          <i class="el-icon-office-building"></i>
                          加工流程
                        </template>
                        {{ item.MachineProcess }}
                      </el-descriptions-item>
                    </el-descriptions>
                  </template>
                </template>
                <el-empty :image-size="200" v-else></el-empty>
              </el-col>
              <el-col :span="12">
                <el-timeline reverse>
                  <el-timeline-item
                    v-for="(item, index) in StepLogList"
                    :key="index"
                    :timestamp="item.StepNo"
                  >
                    <p>设备编号：{{ item.DeviceId }}</p>
                    <p>设备类型：{{ item.Classify }}</p>
                    <p>开始时间：{{ item.StartTime }}</p>
                    <p>结束时间：{{ item.EndTime }}</p>
                  </el-timeline-item>
                </el-timeline>
              </el-col>
            </el-row>
          </div>
        </template>
        <template v-else-if="type == 2">
          <el-row :gutter="20">
            <el-col
              v-for="(item, index) in DeviceInfoList"
              :key="index"
              :lg="6"
              :md="6"
              :sm="6"
              :xl="6"
              :xs="6"
            >
              <el-card shadow="hover" skeleton>
                <div class="item1 shebeijiankong" style="position: relative">
                  <div class="header">{{ item.DeviceId }}</div>
                  <el-row :gutter="20" justify="space-between">
                    <el-col :span="8">
                      <!-- {{ item.DeviceId }} -->
                      <!-- <el-image
                        :src="require('../../assets/img/1.png')"
                        style="margin-top: 24px; width: 80px"
                      ></el-image> -->
                    </el-col>
                    <el-col :span="16">
                      <p
                        style="
                          background: #1fd71f;
                          height: 22px;
                          line-height: 22px;
                          color: #ffffff;
                          border-radius: 3px;
                        "
                      >
                        <span class="label">网络状态：</span>
                        <!-- <el-tag class="ml-2" type="success"> -->
                        <span class="ml-2">{{ item.NetworkState }}</span>

                        <!-- </el-tag> -->
                      </p>
                      <p
                        style="
                          background: #1fd71f;
                          height: 22px;
                          line-height: 22px;
                          color: #ffffff;
                          border-radius: 3px;
                        "
                      >
                        <span class="label">健康状态：</span>
                        <!-- <el-tag class="ml-2" type="success"> -->
                        <span class="ml-2">正常</span>
                        <!-- </el-tag> -->
                      </p>
                      <p
                        style="
                          background: #1fd71f;
                          height: 22px;
                          line-height: 22px;
                          color: #ffffff;
                          border-radius: 3px;
                        "
                      >
                        <span class="label">脱机状态：</span>
                        <!-- <el-tag class="ml-2" type="success"> -->
                        <span class="ml-2">{{ item.OffLineState }}</span>
                        <!-- </el-tag> -->
                      </p>
                      <p
                        style="
                          background: #e7c755;
                          height: 22px;
                          line-height: 22px;
                          color: #ffffff;
                          border-radius: 3px;
                        "
                      >
                        <span class="label">运行状态：</span>
                        <!-- <el-tag class="ml-2" type="success"> -->
                        <span class="ml-2">{{ item.RunningState }}</span>
                        <!-- </el-tag> -->
                      </p>
                      <p
                        style="
                          background: #eb1212;
                          height: 22px;
                          line-height: 22px;
                          color: #ffffff;
                          border-radius: 3px;
                        "
                      >
                        <span class="label">持行状态：</span>
                        <!-- <el-tag class="ml-2" type="success"> -->
                        <span class="ml-2">{{ item.CanMachiineState }}</span>
                        <!-- </el-tag> -->
                      </p>
                    </el-col>
                    <div class="info1">
                      <p>
                        <span class="label">当前执行动作：</span>
                        {{ item.CurAction }}
                      </p>
                      <p>
                        <span class="label">零件编号：</span>
                        {{ item.PartId }}
                      </p>
                      <p>
                        <span class="label">工单编号：</span>
                        {{ item.OrderId }}
                      </p>
                      <!-- <p>
                      <span class="label">订单编号：</span>
                      {{ item.NetworkState }}
                    </p> -->
                      <p>
                        <span class="label">工序编号：</span>
                        {{ item.OpId }}
                      </p>
                    </div>
                  </el-row>
                </div>
              </el-card>
            </el-col>
          </el-row>
        </template>
        <template v-else-if="type == 3">
          <el-row :gutter="20">
            <el-col :lg="6" :md="6" :sm="6" :xl="6" :xs="6">
              <el-menu
                default-active="1"
                class="el-menu-vertical-demo"
                @open="handleOpen"
                @select="select"
              >
                <el-menu-item
                  :index="index"
                  v-for="(item, index) in DeviceLogList"
                  :key="index"
                >
                  <span slot="title">{{ item.DeviceId }}</span>
                </el-menu-item>
              </el-menu>
            </el-col>
            <el-col :lg="18" :md="18" :sm="18" :xl="18" :xs="18">
              <el-card shadow="hover" class="icon-panel" skeleton>
                <div
                  style="overflow: auto; height: 350px"
                  v-html="getInfo(LogInfo)"
                ></div>
              </el-card>
            </el-col>
          </el-row>
        </template>
      </div>
      <template slot="footer">
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
        </span>
      </template>
    </el-dialog>
    <el-dialog
      :close-on-click-modal="false"
      :visible="showDialog"
      width="500px"
      :before-close="handleClose2"
    >
      <div>
        <el-select v-model="gdvalue" placeholder="请选择工单编号">
          <el-option
            v-for="item in chadanlist"
            :key="item.OrderId"
            :label="item.OrderId"
            :value="item.OrderId"
          ></el-option>
        </el-select>
      </div>
      <template slot="footer">
        <span class="dialog-footer">
          <el-button @click="showDialog = false">取消</el-button>
          <el-button @click="gdconfirm" type="primary">确认</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
  import VabChart from '@/extra/VabChart'
  import {
    WorkorderInfoList,
    DeviceInfoList,
    MonthPlanList,
    WorkorderProduceQueue,
    DeviceLog,
    ProcessLog,
    OrderPauseOrCancel,
    OrderCancellation,
  } from '@/api/production'

  export default {
    components: {
      VabChart,
    },
    data() {
      return {
        chadanlist: [],
        gdoptions: [
          {
            value: '选项1',
            label: '工单1',
          },
        ],
        gdvalue: '',
        showDialog: false,
        iconList: [
          {
            icon: 'picture-in-picture-2-line',
            title: '设备监控',
            link: '',
            color: '#95de64',
          },
          {
            icon: 'picture-in-picture-exit-line',
            title: '日志监控',
            link: '',
            color: '#69c0ff',
          },
        ],

        initOptions: {
          renderer: 'svg',
        },
        option: {
          xAxis: {
            type: 'category',
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
          },
          yAxis: {
            type: 'value',
          },
          series: [
            {
              data: [120, 200, 150, 80, 70, 110, 130],
              type: 'bar',
            },
          ],
        },

        list: [],
        total: 0,

        layout: 'total, sizes, prev, pager, next, jumper',
        queryForm: {
          pageNo: 1,
          pageSize: 10,
          title: '',
        },
        dialogVisible: false,
        type: 1,
        title: '设备详情',
        DeviceInfoList: [],
        DeviceLogList: [],
        StepLogList: [],
        detail: {
          PartQueue: [],
        },

        LogInfo: ``,
      }
    },

    created() {
      MonthPlanList({ Index: 0, Count: 10 }).then((res) => {
        console.log('--本月生产计划获取', res)
        const series = []
        const legend = {
          data: [],
        }
        const xAxis = {
          type: 'category',
          data: [],
        }
        res.ProduceOrderList.forEach((item, index) => {
          xAxis.data.push(item.ProduceOrderId)
          legend.data.push(item.ProduceOrderId)
          item.ProductInfoList.forEach((ii) => {
            series.push(ii.ProductNum)
          })
        })
        console.log('seriesseries', series)
        this.option.series = series
        this.option.legend = legend
        this.option.xAxis = xAxis
      })
      this.fetchData()
    },
    methods: {
      getInfo(e) {
        var reg = new RegExp('\r\n', 'g')
        return e.replace(reg, '<br/>')
      },
      handleOpen(e) {
        console.log(e)
      },
      select(e) {
        console.log(e)
        this.LogInfo = this.DeviceLogList[e].LogInfo
      },
      //确认选择工单
      gdconfirm() {
        this.showDialog = false
      },
      getWorkorderProduceQueue(row) {
        ProcessLog().then((res) => {
          this.StepLogList = res.StepLogList
        })
        WorkorderProduceQueue({ OrderId: row.OrderId }).then((res) => {
          this.detail = res
          this.title = '设备详情'
          this.type = 1
          this.dialogVisible = true
        })
      },
      zanting(row, PauseOrCancel = 0) {
        let state = row.OrderState == '已暂停' ? 1 : 0
        //PauseOrCancel 1：暂停 0：恢复
        OrderPauseOrCancel({ OrderId: row.OrderId, PauseOrCancel: state }).then(
          (res) => {
            this.fetchData()
          }
        )
      },
      quxiao() {},
      // zanting1() {

      // },
      cancel(row) {
        OrderCancellation({ OrderId: row.OrderId }).then((res) => {
          this.fetchData()
        })
      },
      DeviceStateTypeData(e) {
        if (e == 1) {
          //设备生产日志信息获取
          DeviceLog().then((res) => {
            this.title = '日志监控'
            this.type = 3
            this.DeviceLogList = res.DeviceLogList
            this.LogInfo = this.DeviceLogList[0].LogInfo
            this.dialogVisible = true
          })
        } else {
          //获取设备监控列表
          DeviceInfoList({ Index: 1, Count: 10 }).then((res) => {
            this.type = 2
            this.title = '设备监控'
            this.DeviceInfoList = res.DeviceInfoList
            this.dialogVisible = true
          })
        }
      },
      handleClose() {
        this.dialogVisible = false
      },
      handleClose2() {
        this.showDialog = false
      },
      handleSizeChange(val) {
        this.queryForm.pageSize = val
        this.fetchData()
      },
      handleCurrentChange(val) {
        this.queryForm.pageNo = val
        this.fetchData()
      },
      handleDetail() {
        PartDetailsInfo({ PartId: row.PartId }).then((res) => {
          this.dialogVisible = true
          this.ProcessLog = res.ProcessLog.StepLogList
        })
      },
      handleDetail() {
        OrderIdChoose({ OrderId: row.OrderId }).then((res) => {
          this.FinishOrderState = res.FinishOrderState
          this.IsQualified = res.IsQualified
          this.PartId = res.PartId
          this.dialogVisible1 = true
        })
      },
      fetchData() {
        const params = {
          Index: this.getPage(this.queryForm.pageNo, this.queryForm.pageSize),
          Count: this.queryForm.pageSize,
        }
        WorkorderInfoList(params).then((res) => {
          console.log(res)
          this.list = res.WorkorderList
          this.total = res.TotalCount
        })
      },
      getDialogWorkorderInfoList() {
        const params = {
          Index: 1,
          Count: 100,
        }
        WorkorderInfoList(params).then((res) => {
          console.log(res)
          this.chadanlist = res.WorkorderList
        })
      },
      chadan() {
        this.getDialogWorkorderInfoList()
        this.showDialog = true
      },
    },
  }
</script>

<style lang="scss" scoped>
  $base: '.personal-center';
  #{$base}-container {
    padding: 0 !important;
    background: $base-color-background !important;

    #{$base}-user-info {
      padding: $base-padding;
      text-align: center;

      :deep() {
        .el-avatar {
          img {
            cursor: pointer;
          }
        }
      }

      &-full-name {
        margin-top: 15px;
        font-size: 24px;
        font-weight: 500;
        color: #262626;
      }

      &-description {
        margin-top: 8px;
      }

      &-follow {
        margin-top: 15px;
      }

      &-list {
        margin-top: 18px;
        line-height: 30px;
        text-align: left;
        list-style: none;

        h5 {
          margin: -20px 0 5px 0;
        }

        :deep() {
          .el-tag {
            margin-right: 10px !important;
          }

          .el-tag + .el-tag {
            margin-left: 0;
          }
        }
      }
    }

    #{$base}-item {
      display: flex;

      i {
        font-size: 40px;
      }

      &-content {
        box-sizing: border-box;
        flex: 1;
        margin-left: $base-margin;

        &-second {
          margin-top: 8px;
        }
      }
    }
  }

  .personal-center-container {
    padding: 0 !important;
    background: $base-color-background !important;
    :deep() {
      .echarts {
        width: 100%;
        height: 200px;
      }
    }
  }

  .item1 {
    width: 100%;
    min-height: 200px;

    .header {
      height: 30px;
      background-color: #2f54eb;
      line-height: 30px;
      text-align: center;
      color: #fff;
    }

    .label {
      display: inline-block;
      width: 70px;
    }

    .info1 {
      padding: 0px 10px;
      color: #6c6c6c;
      .label {
        display: inline-block;
        width: 99px;
        text-align: left;
      }
    }
  }
  .shebeijiankong {
    .header {
      position: absolute;
      left: -21px;
      padding: 0 30px;
      top: -21px;
      border-radius: 10px 0 10px 0;
    }
  }

  .asgg {
    height: 10px;
    height: 130px;
    font-size: 14px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 8;
    -webkit-box-orient: vertical;
  }
</style>
